<mat-grid-list cols="1" rowHeight="150px">
  <mat-grid-tile>
    <p class="video-description">Local:</p>
    <video #local_video [autoplay]="true" [muted]="true" width="100px" height="100px" [playsInline]="true"></video>
  </mat-grid-tile>
  <mat-grid-tile>
    <p class="video-description">Remote:</p>
    <video #received_video [autoplay]="true" width="100px" height="100px" [playsInline]="true"></video>
  </mat-grid-tile>
  <mat-grid-tile>
    <p class="video-description">Address: {{myaddress}}</p>
  </mat-grid-tile>
  <mat-grid-tile>
    Peer: 
      <mat-form-field>
        <mat-select [(value)]="selectedPeer">
          <mat-option *ngFor="let p of peers" [value]="p">{{p}}</mat-option>
        </mat-select>
      </mat-form-field>
  </mat-grid-tile>
</mat-grid-list>
<button mat-raised-button color="primary" (click)="startLocalVideo()" [disabled]="localVideoActive">Start Local</button>
<button mat-raised-button color="primary" (click)="pauseLocalVideo()" [disabled]="!localVideoActive">Stop Local</button>
<button mat-raised-button color="primary" (click)="call()" [disabled]="inCall || !localVideoActive">Call</button>
<button mat-raised-button color="primary" (click)="hangUp()" [disabled]="!inCall">HangUp</button>
